<template>
  <div class="bg-white rounded-lg shadow-sm p-8">
    <div class="mb-8">
      <h2 class="text-2xl font-bold text-gray-900 mb-2">帮助与反馈</h2>
      <p class="text-sm text-gray-500">遇到问题？我们为您提供帮助和支持</p>
    </div>

    <div class="mb-8">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">常见问题</h3>
      <div class="space-y-3">
        <details class="border border-gray-200 rounded-lg">
          <summary class="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50">
            <span class="text-gray-700">如何修改我的收货地址？</span>
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
          </summary>
          <div class="px-4 py-3 text-sm text-gray-600 border-t border-gray-200">您可以在"我的主页"中点击"收货地址"进行修改。</div>
        </details>
        <details class="border border-gray-200 rounded-lg">
          <summary class="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50">
            <span class="text-gray-700">订单发布后可以取消吗？</span>
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
          </summary>
          <div class="px-4 py-3 text-sm text-gray-600 border-t border-gray-200">订单发布后，在代拿员接单前可以取消。接单后需要联系代拿员协商。</div>
        </details>
        <details class="border border-gray-200 rounded-lg">
          <summary class="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50">
            <span class="text-gray-700">如何联系代拿员？</span>
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
          </summary>
          <div class="px-4 py-3 text-sm text-gray-600 border-t border-gray-200">订单被接单后，您可以在订单详情页面看到代拿员的联系方式。</div>
        </details>
        <details class="border border-gray-200 rounded-lg">
          <summary class="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50">
            <span class="text-gray-700">订单配送费如何计算？</span>
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
          </summary>
          <div class="px-4 py-3 text-sm text-gray-600 border-t border-gray-200">配送费由基础费用和距离附加费组成，具体金额在下单时会显示。</div>
        </details>
        <details class="border border-gray-200 rounded-lg">
          <summary class="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50">
            <span class="text-gray-700">如何评价代拿员的服务？</span>
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
          </summary>
          <div class="px-4 py-3 text-sm text-gray-600 border-t border-gray-200">订单完成后，您可以在"我的订单"中对代拿员进行评价和打分。</div>
        </details>
      </div>
      <div class="mt-4 text-center">
        <button
          class="text-blue-600 hover:text-blue-700 text-sm"
          @click="$router.push('/order/profile/help/faq')"
        >
          查看更多常见问题
        </button>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">联系管理员</h3>
      <div class="max-w-md">
        <div class="border border-gray-200 rounded-lg p-6 text-center hover:border-blue-300 transition-colors cursor-pointer" @click="contactAdmin">
          <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
          </div>
          <div class="font-medium text-gray-900 mb-1">联系管理员</div>
          <div class="text-sm text-gray-500">在线沟通，快速响应</div>
        </div>
      </div>
    </div>

    <div>
      <h3 class="text-lg font-semibold text-gray-900 mb-4">意见反馈</h3>
      <form @submit.prevent="submitFeedback" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">反馈内容</label>
          <textarea v-model="feedbackForm.content" rows="6" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" placeholder="请详细描述您遇到的问题或建议..." required></textarea>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">联系方式（选填）</label>
          <input v-model="feedbackForm.contact" type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请留下您的联系方式，方便我们跟进">
        </div>
        <button type="submit" :disabled="isSubmitting" class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:bg-gray-400 disabled:cursor-not-allowed">
          {{ isSubmitting ? '提交中...' : '提交反馈' }}
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'OrderHelp',
  data() {
    return {
      feedbackForm: {
        content: '',
        contact: ''
      },
      isSubmitting: false
    }
  },
  methods: {
    async contactAdmin() {
      const userId = Number(localStorage.getItem('userId'))
      if (!userId) {
        ElMessage.warning('请先登录')
        this.$router.push('/login')
        return
      }
      try {
        // 获取管理员列表
        const { data: adminData } = await axios.get('/api/users/admins')
        const admins = (adminData && adminData.data) || []
        if (admins.length === 0) {
          ElMessage.info('暂无在线管理员，请稍后再试')
          return
        }
        // 选择第一个管理员建立会话
        const adminId = admins[0].id
        const { data: convData } = await axios.post('/api/messages/conversations', {
          participants: [userId, adminId],
          type: 1 // 私聊
        })
        const cid = convData && convData.data && convData.data.id
        if (cid) {
          this.$router.push({ path: '/messages', query: { cid } })
        } else {
          ElMessage.error('无法创建会话，请稍后再试')
        }
      } catch (e) {
        console.error('联系管理员失败', e)
        ElMessage.error('联系管理员失败，请稍后再试')
      }
    },
    async submitFeedback() {
      if (!this.feedbackForm.content.trim()) {
        ElMessage.warning('请输入反馈内容')
        return
      }

      const userId = localStorage.getItem('userId')
      if (!userId) {
        ElMessage.warning('请先登录')
        this.$router.push('/login')
        return
      }

      this.isSubmitting = true

      try {
        const response = await fetch('/api/feedback', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            userId: userId,
            userType: 'order_user',
            content: this.feedbackForm.content,
            contact: this.feedbackForm.contact || null
          })
        })

        const result = await response.json()

        if (result.success) {
          ElMessage.success('反馈提交成功，我们会尽快处理')
          this.feedbackForm = {
            content: '',
            contact: ''
          }
        } else {
          ElMessage.error(result.message || '提交失败')
        }
      } catch (error) {
        console.error('提交反馈失败:', error)
        ElMessage.error('网络错误，请稍后再试')
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>


